<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM API练习</title>
</head>
<body>
    <!-- <div class="one">
        hello
    </div>

    <div id="two">
        hello two
    </div>

    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
        <li>eee</li>
    </ul> -->
    <!-- <div id="screen">
        <ul>
            <li>aaa</li>
            <li>aaa</li>
            <li>aaa</li>
        </ul>
    </div>
    <button id="btn">这是获取内容按钮</button>
    <button id="btn2">这是修改内容按钮</button> -->

    <!-- <div id="screen">
        0
    </div> -->
    <input type="text" id="screen" value="0">
    <button id="plus">+</button>

    <script>
        // 实现点一下按钮数字 + 1
        let plusbtn = document.querySelector('#plus');
        plusbtn.onclick = function() {
            let scr = document.querySelector('#screen');
            // innerHTML的返回值是一个字符串，如果想要进行数字相加，需要先转成整型
            // let val = parseInt(scr.innerHTML);
            // scr.innerHTML = val + 1;
            // input的特殊之处在于它是单标签，因此没有innerHTML属性，需要借助value
            let val = parseInt(scr.value);
            scr.value = val + 1;
        }

        // 操作元素内容
        // let btn = document.querySelector('#btn');
        // btn.onclick = function() {
        //     let scr = document.querySelector('#screen');
        //     // 如果标签里面不是一个纯文本，就会打印里面的所有内容，包括标签里面的标签
        //     console.log(scr.innerHTML);
        // }

        // let btn2 = document.querySelector('#btn2');
        // btn2.onclick = function() {
        //     let scr = document.querySelector('#screen');
        //     scr.innerHTML = 'hello world';
        // }

        // querySelector参数，就是一个 CSS 选择器
        // let a = document.querySelector('.one');
        // console.log(a);
        // let b = document.querySelector('#two');
        // console.log(b);
        // // 如果有多个元素都可以匹配到，那么querySelector就只能选择匹配结果的第一个元素
        // // 想要全部匹配，需要用到querySelectorAll
        // let c = document.querySelector('ul li');
        // console.log(c);

        // // querySelectorAll返回的是一个像数组的对象，有length，也可以通过下标访问内部元素
        // // 这样的对象使用起来和数组非常相似，称为“伪数组”
        // let arr = document.querySelectorAll('ul li');
        // console.log(arr);
        // let button = document.querySelector('button');
        // // 回调函数
        // button.onclick = function () {
        //     console.log('hello');
        // }
    </script>
</body>
</html>